<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center{
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>
    <h2>元素居中对齐</h2>
    <p>水平居中块级元素（如div）,可以使用mrgin:auto;</p>
    <div class="center">
        <p><b>注意：</b>使用margin:auto无法兼容IE8,除非！DOCTYPE已经声明。</p>
        </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片居中对齐</title>
<style>
img{
    display: block;
    margin: 0 auto;
}
</style>
</head>
<body>
    <h2>图片居中对齐</h2>
    <p>要让图片居中对齐，可以使用margin:auto；并将它放到块元素中：</p>
    <img src="https://static.runoob.com/images/mix/paris.jpg" alt="paris" style="width:40%">
    </body>
</html>




